<script>
import * as echarts from 'echarts';

export default{
    data() {
        return {
            myChart:null,
        }
    },
    methods: {
        setOption(type,x,y){
            //绘制图表
        this.myChart.setOption({
            title: {
            text: '图标标题'
        },
        //配置鼠标移入的提示
        tooltip: {
            show:true,
            type:'line',
            axis:'auto',
            snap:true,

        },
        xAxis: {
            data: x || ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
            {
            name: '销量',
            type: type || 'line',
            data: y || [5, 20, 36, 10, 10, 20]
            }
        ]
        });
        }
    },
    mounted() {
        this.myChart = echarts.init(document.getElementById('main'));
        this.setOption()
    },
}
</script>
<template>
    <h4>显示图表</h4>
    <p>
        <button @click="setOption('line')">折线图</button>
        <button @click="setOption('bar')">柱状图</button>
        <button @click="setOption('pie')">饼图</button>
        <button @click="setOption('scatter')">散点图</button>
        <button @click="setOption('',['电视','冰箱','洗衣机','空调','热水器','电饭锅','微波炉'],[1486,1234,3524,2342,2343,3242,3423])">切换数据</button>
    </p>
    <div id="main"></div>
</template>

<style lang="scss" scoped>
#main{
    width:900px;
    height: 450px;
    background-color: #fff;
}    
</style>